<template>
  <div>
    <div class="app-container padding-content clearfix pageHeader">
      <div class="header fl">{{$route.meta.title}}</div>
      <div class="extra fr">
        <el-button @click="back">返回</el-button>
      </div>
    </div>

    <div class="app-container margin-content padding-content">
      <div class="block">
        <el-row :gutter="32">
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">提单号</div>
            <div class="detail">{{result.blNo}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">船舶编号</div>
            <div class="detail">{{result.vesselNo}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">航次号</div>
            <div class="detail">{{result.voyageNo}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">进出口类型</div>
            <div class="detail">{{result.ieFlag | ieFlagFilter}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">作业类型</div>
            <div class="detail">{{result.actType | bulkTypeFilter}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">作业时间</div>
            <div class="detail">{{result.actTimeDesc}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">仓位</div>
            <div class="detail">{{result.yardCode}}</div>
          </el-col>
        </el-row>
        <divider></divider>
      </div>
      <div class="block">
        <el-row :gutter="32">
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">发货人</div>
            <div class="detail">{{result.shipper}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">收货人</div>
            <div class="detail">{{result.consignee}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">货物名称</div>
            <div class="detail">{{result.cargoName}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">重量</div>
            <div class="detail">{{result.weight}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">体积</div>
            <div class="detail">{{result.volume}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">件数</div>
            <div class="detail">{{result.packNum}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">包装类型</div>
            <div class="detail">{{result.packType | bulkPackingFilter}}</div>
          </el-col>
        </el-row>
        <divider></divider>
      </div>
    </div>
  </div>
</template>

<script>
  // api
  import {fetchDetail} from '@/api/portBulk'
  // vuex
  import {mapGetters} from 'vuex'
  // components
  import Divider from '@/components/Divider'

  export default {
    name: 'port-bulk-detail',
    data() {
      return {
        result: {}
      }
    },
    computed: {
      ...mapGetters([
        'currentId'
      ])
    },
    created() {
      this._fetchDetail()
    },
    methods: {
      _fetchDetail() {
        const {id, beginTime, endTime} = this.currentId
        fetchDetail({id, beginTime, endTime}).then((res) => {
          this.result = res.data.data
        })
      },
      back() {
        this.$parent.back()
      }
    },
    components: {
      Divider
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">

</style>
